<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>SuperheroAdmin - Bootstrap Admin Template</title>
	
	<!-- bootstrap -->
	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" />

	<!-- libraries -->
	<link href="css/libs/font-awesome.css" type="text/css" rel="stylesheet" />

	<!-- global styles -->
	<link rel="stylesheet" type="text/css" href="css/compiled/layout.css">
	<link rel="stylesheet" type="text/css" href="css/compiled/elements.css">

	<!-- this page specific styles -->
	<link rel="stylesheet" href="css/compiled/graphs.css" type="text/css" />

	<!-- google font libraries -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'>
	
	<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
		<link href="css/libs/font-awesome-ie7.css" type="text/css" rel="stylesheet" />
	<![endif]-->
</head>
<body>
	<header class="navbar" id="header-navbar">
		<div class="container">
			<a href="index.html" id="logo" class="navbar-brand col-md-3 col-sm-4 col-xs-12">
				<img src="img/logo.png" alt=""/> SuperheroAdmin
			</a>
			
			<button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
				<span class="sr-only">Toggle navigation</span>
				<span class="fa fa-bars"></span>
			</button>
			
			<div class="nav-no-collapse pull-right" id="header-nav">
				<ul class="nav navbar-nav pull-right">
					<li class="mobile-search">
						<a class="btn">
							<i class="fa fa-search"></i>
						</a>
						
						<div class="drowdown-search">
							<form role="search">
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search...">
									<i class="fa fa-search nav-search-icon"></i>
								</div>
							</form>
						</div>
						
					</li>
					<li class="dropdown hidden-xs">
						<a class="btn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-warning"></i>
							<span class="count">8</span>
						</a>
						<ul class="dropdown-menu notifications-list">
							<li class="pointer">
								<div class="pointer-inner">
									<div class="arrow"></div>
									<div class="arrow-border"></div>
								</div>
							</li>
							<li class="item-header">You have 6 new notifications</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-comment"></i>
									<span class="content">New comment on ‘Awesome P...</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-plus"></i>
									<span class="content">New user registration</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-envelope"></i>
									<span class="content">New Message from George</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-shopping-cart"></i>
									<span class="content">New purchase</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-eye"></i>
									<span class="content">New order</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item-footer">
								<a href="#">
									View all notifications
								</a>
							</li>
						</ul>
					</li>
					<li class="dropdown hidden-xs">
						<a class="btn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-envelope-o"></i>
							<span class="count">16</span>
						</a>
						<ul class="dropdown-menu notifications-list messages-list">
							<li class="pointer">
								<div class="pointer-inner">
									<div class="arrow"></div>
									<div class="arrow-border"></div>
								</div>
							</li>
							<li class="item first-item">
								<a href="#">
									<img src="img/samples/messages-photo-1.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											George Clooney
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<img src="img/samples/messages-photo-2.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											Emma Watson
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<img src="img/samples/messages-photo-3.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											Robert Downey Jr.
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item-footer">
								<a href="#">
									View all messages
								</a>
							</li>
						</ul>
					</li>
					<li class="hidden-xs">
						<a class="btn">
							<i class="fa fa-cog"></i>
						</a>
					</li>
					<li class="dropdown profile-dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<img src="img/samples/profile-photo.png" alt=""/>
							<span class="hidden-xs">Scarlett Johansson</span> <b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li>
							<li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
							<li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li>
							<li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
						</ul>
					</li>
					<li class="hidden-xxs">
						<a class="btn">
							<i class="fa fa-power-off"></i>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<div class="container">
		<div class="row">
			<div class="col-md-2" id="nav-col">
				<section id="col-left">
					<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">	
						<ul class="nav nav-pills nav-stacked">
							<li>
								<a href="index.html">
									<i class="fa fa-dashboard"></i>
									<span>Dashboard</span>
								</a>
							</li>
							<li class="active">
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-bar-chart-o"></i>
									<span>Graphs</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="graphs-xcharts.html">
											xCharts
										</a>
									</li>
									<li>
										<a href="graphs-flot.html" class="active">
											Flot
										</a>
									</li>
									<li>
										<a href="graphs-morris.html">
											Morris &amp; Mixed
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-users"></i>
									<span>Users</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="users.html">
											User list
										</a>
									</li>
									<li>
										<a href="user-profile.html">
											User profile
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-edit"></i>
									<span>Forms</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="form-elements.html">
											Form elements
										</a>
									</li>
									<li>
										<a href="form-wizard.html">
											Form wizard
										</a>
									</li>
									<li>
										<a href="form-wizard-popup.html">
											Form wizard popup
										</a>
									</li>
									<li>
										<a href="form-wysiwyg.html">
											WYSIWYG
										</a>
									</li>
									<li>
										<a href="form-ckeditor.html">
											WYSIWYG CKEditor
										</a>
									</li>
									<li>
										<a href="form-dropzone.html">
											Drop File Upload
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="tables.html">
									<i class="fa fa-table"></i>
									<span>Tables</span>
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-font"></i>
									<span>Typography</span>
								</a>
							</li>
							<li>
								<a href="calendar.html">
									<i class="fa fa-calendar"></i>
									<span>Calendar</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-star"></i>
									<span>Icons</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="icons-awesome.html">
											Awesome Icons
										</a>
									</li>
									<li>
										<a href="icons-halflings.html">
											Halflings
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-desktop"></i>
									<span>UI Elements</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="ui-elements.html">
											Elements
										</a>
									</li>
									<li>
										<a href="ui-nestable.html">
											Nestable
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="gallery.html">
									<i class="fa fa-picture-o"></i>
									<span>Gallery</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-folder-open"></i>
									<span>3 Level Menu</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="#" class="dropdown-toggle">
											2nd Level
											<i class="fa fa-chevron-circle-down drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											2nd Level
											<i class="fa fa-chevron-circle-down drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">
											2nd Level
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-file-text-o"></i>
									<span>Extra pages</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="pricing.html">
											Pricing
										</a>
									</li>
									<li>
										<a href="login.html">
											Login
										</a>
									</li>
									<li>
										<a href="login-full.html">
											Login full
										</a>
									</li>
									<li>
										<a href="invoice.html">
											Invoice
										</a>
									</li>
									<li>
										<a href="emails.html">
											Emails
										</a>
									</li>
									<li>
										<a href="faq.html">
											FAQ
										</a>
									</li>
									<li>
										<a href="error-404.html">
											Error 404
										</a>
									</li>
									<li>
										<a href="error-404-v2.html">
											Error 404 Nested
										</a>
									</li>
									<li>
										<a href="error-500.html">
											Error 500
										</a>
									</li>
									<li>
										<a href="extra-grid.html">
											Grid
										</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</section>
			</div>
			<div class="col-lg-10 col-sm-11" id="content-wrapper">
				<div class="row">
					<div class="col-lg-12">
						<h1>Flot Charts</h1>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Flot Bar chart</h2>
									<div id="graph-bar" style="height: 300px; padding: 0px; position: relative;"></div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Flot Line chart</h2>
									<div id="graph-flot-sin" style="height: 300px; padding: 0px; position: relative;"></div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-6">
								<div class="main-box">
									<div class="clearfix">
										<h2 class="pull-left">Stack charts</h2>
										
										<div class="icon-box pull-right">
											<p class="stackControls">
												<button class="btn">With stacking</button>
												<button class="btn">Without stacking</button>
											</p>
											<p class="graphControls">
												<button class="btn">Bars</button>
												<button class="btn">Lines</button>
												<button class="btn">Lines with steps</button>
											</p>
										</div>
									</div>
									
									<div id="graph-flot-stacking" style="height: 400px; padding: 0px; position: relative;"></div>
								</div>
							</div>
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Horizontal bar charts</h2>
									
									<div id="graph-flot-bar-horizontal" style="height: 435px; padding: 0px; position: relative;"></div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Realtime example</h2>
									<div id="graph-flot-realtime" style="height: 400px; padding: 0px; position: relative;"></div>
									
									<br/>
									<p>
										You can update a chart periodically to get a real-time effect by using a timer to insert the new 
										data in the plot and redraw it.
									</p>
	
									<p>
										Time between updates: 
										<input id="updateInterval" class="form-control inline" type="text" value="" style="text-align: right; width:5em; display: inline-block;"> 
										milliseconds
									</p>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Facebook fans</h2>
									<div id="graph-flot-points" style="height: 400px; padding: 0px; position: relative;"></div>
								</div>
							</div>
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Pie chart</h2>
									<div id="graph-flot-donut" style="height: 400px; padding: 0px; position: relative;"></div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer id="footer-bar">
		<p id="footer-copyright">
			&copy; 2014 <a href="http://www.adbee.sk/" target="_blank">Adbee digital</a>. Powered by SuperheroAdmin.
		</p>
	</footer>
	
	<!-- global scripts -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	
	<!-- this page specific scripts -->
	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script><![endif]-->
	<script src="js/flot/jquery.flot.js"></script>
	<script src="js/flot/jquery.flot.min.js"></script>
	<script src="js/flot/jquery.flot.pie.min.js"></script>
	<script src="js/flot/jquery.flot.stack.min.js"></script>
	<script src="js/flot/jquery.flot.resize.min.js"></script>
	<script src="js/flot/jquery.flot.time.min.js"></script>
	<script src="js/flot/jquery.flot.orderBars.js"></script>
	
	<!-- theme scripts -->
	<script src="js/scripts.js"></script>
	
	<!-- this page specific inline scripts -->
	<script>
	$(function() {
		
		// bar chart
		if ($('#graph-bar').length) {
			var db1 = [];
			for (var i = 0; i <= 10; i += 1) {
				db1.push([i, parseInt(Math.random() * 30)]);
			}

			var db2 = [];
			for (var i = 0; i <= 10; i += 1) {
				db2.push([i, parseInt(Math.random() * 30)]);
			}

			var db3 = [];
			for (var i = 0; i <= 10; i += 1) {
				db3.push([i, parseInt(Math.random() * 30)]);
			}
			
			var series = new Array();

			series.push({
				data : db1,
				bars : {
					show : true,
					barWidth : 0.2,
					order : 1,
					lineWidth: 1
				}
			});
			series.push({
				data : db2,
				bars : {
					show : true,
					barWidth : 0.2,
					order : 2,
					lineWidth: 1
				}
			});
			series.push({
				data : db3,
				bars : {
					show : true,
					barWidth : 0.2,
					order : 3,
					lineWidth: 1
				}
			}); 

			$.plot("#graph-bar", series, {
				colors: ['#3fcfbb', '#8f44ad', '#626f70', '#dd504c', '#d5ac08', '#77ab49'],
				grid: {
					tickColor: "#ddd",
					borderWidth: 0
				},
				shadowSize: 0
			});
		}
		
		// bar chart - horizontal
		if ($('#graph-flot-bar-horizontal').length) {
			var db1 = [];
			for (var i = 0; i <= 4; i += 1) {
				db1.push([parseInt(Math.random() * 30), i]);
			}

			var db2 = [];
			for (var i = 0; i <= 4; i += 1) {
				db2.push([parseInt(Math.random() * 30), i]);
			}

			var db3 = [];
			for (var i = 0; i <= 4; i += 1) {
				db3.push([parseInt(Math.random() * 30), i]);
			}
			
			var series = new Array();

			series.push({
				data : db1,
				bars : {
					show : true,
					barWidth : 0.2,
					order : 1,
					lineWidth: 1,
					horizontal: true
				}
			});
			series.push({
				data : db2,
				bars : {
					show : true,
					barWidth : 0.2,
					order : 2,
					lineWidth: 1,
					horizontal: true
				}
			});
			series.push({
				data : db3,
				bars : {
					show : true,
					barWidth : 0.2,
					order : 3,
					lineWidth: 1,
					horizontal: true
				}
			}); 

			$.plot("#graph-flot-bar-horizontal", series, {
				colors: ['#dd504c', '#d5ac08', '#626f70', '#3fcfbb', '#8f44ad', '#77ab49'],
				grid: {
					tickColor: "#ddd",
					borderWidth: 0
				},
				shadowSize: 0
			});
		}
		
		// graph with points - sin/cos example
		if ($('#graph-flot-sin').length) {
			var sin = [],
				cos = [];

			for (var i = 0; i < 14; i += 0.5) {
				sin.push([i, Math.sin(i)]);
				cos.push([i, Math.cos(i)]);
			}

			var plot = $.plot("#graph-flot-sin", [
				{ data: sin, label: "sin(x)"},
				{ data: cos, label: "cos(x)"}
			], {
				series: {
					lines: {
						show: true,
						lineWidth: 2
					},
					points: {
						show: true
					}
				},
				grid: {
					hoverable: true,
					clickable: true,
					tickColor: "#ddd",
					borderWidth: 0
				},
				yaxis: {
					min: -1.2,
					max: 1.2
				},
				colors: ['#3fcfbb', '#77ab49', '#626f70', '#dd504c', '#d5ac08', '#8f44ad'],
				shadowSize: 0
			});

			function showTooltip(x, y, contents) {
				$("<div id='tooltip'>" + contents + "</div>").css({
					position: "absolute",
					display: "none",
					top: y + 5,
					left: x + 5,
					border: "1px solid #fdd",
					padding: "2px",
					"background-color": "#fee",
					opacity: 0.80
				}).appendTo("body").fadeIn(200);
			}

			var previousPoint = null;
			$("#graph-flot-sin").bind("plothover", function (event, pos, item) {

				if ($("#enablePosition:checked").length > 0) {
					var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
					$("#hoverdata").text(str);
				}

				if ($("#enableTooltip:checked").length > 0) {
					if (item) {
						if (previousPoint != item.dataIndex) {

							previousPoint = item.dataIndex;

							$("#tooltip").remove();
							var x = item.datapoint[0].toFixed(2),
							y = item.datapoint[1].toFixed(2);

							showTooltip(item.pageX, item.pageY,
							    item.series.label + " of " + x + " = " + y);
						}
					} else {
						$("#tooltip").remove();
						previousPoint = null;            
					}
				}
			});

			$("#graph-flot-sin").bind("plotclick", function (event, pos, item) {
				if (item) {
					$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
					plot.highlight(item.series, item.datapoint);
				}
			});
		}

		// stack graph
		if ($('#graph-flot-stacking').length) {
			var d1 = [];
			for (var i = 0; i <= 10; i += 1) {
				d1.push([i, parseInt(Math.random() * 30)]);
			}

			var d2 = [];
			for (var i = 0; i <= 10; i += 1) {
				d2.push([i, parseInt(Math.random() * 30)]);
			}

			var d3 = [];
			for (var i = 0; i <= 10; i += 1) {
				d3.push([i, parseInt(Math.random() * 30)]);
			}

			var stack = 0,
				bars = true,
				lines = false,
				steps = false;

			function plotWithOptions() {
				$.plot("#graph-flot-stacking", [ d1, d2, d3 ], {
					series: {
						stack: stack,
						lines: {
							show: lines,
							fill: true,
							steps: steps,
							lineWidth: 1
						},
						bars: {
							show: bars,
							barWidth: 0.3,
							lineWidth: 1
						}
					},
					colors: ['#3fcfbb', '#77ab49', '#626f70', '#dd504c', '#d5ac08', '#8f44ad'],
					grid: {
						tickColor: "#ddd",
						borderWidth: 0
					},
					shadowSize: 0
				});
			}

			plotWithOptions();

			$(".stackControls button").click(function (e) {
				e.preventDefault();
				stack = $(this).text() == "With stacking" ? true : null;
				plotWithOptions();
			});

			$(".graphControls button").click(function (e) {
				e.preventDefault();
				bars = $(this).text().indexOf("Bars") != -1;
				lines = $(this).text().indexOf("Lines") != -1;
				steps = $(this).text().indexOf("steps") != -1;
				plotWithOptions();
			});
		}

		// donut chart
		if ($('#graph-flot-donut').length) {
			var dataDonut = [
				{ label: "Series1",  data: 10},
				{ label: "Series2",  data: 30},
				{ label: "Series3",  data: 90},
				{ label: "Series4",  data: 70},
				{ label: "Series5",  data: 80},
				{ label: "Series6",  data: 110}
			];
			
			$.plot('#graph-flot-donut', dataDonut, {
			    series: {
			        pie: {
			            show: true,
			            innerRadius: 0.5,
			            label: {
			                show: true,
			            }
			        }
			    },
			    colors: ['#3fcfbb', '#77ab49', '#d5ac08', '#626f70', '#dd504c', '#8f44ad'],
			    legend: {
			        show: false,
			    }
			});
		}

		// graph with points
		if ($('#graph-flot-points').length) {
			var likes = [[1, 5], [2, 10], [3, 15], [4, 20],[5, 25],[6, 30],[7, 35],[8, 40],[9, 45],[10, 50],[11, 55],[12, 60],[13, 65],[14, 70],[15, 75],[16, 80],[17, 85],[18, 90],[19, 85],[20, 80],[21, 75],[22, 80],[23, 75],[24, 70],[25, 65],[26, 75],[27,80],[28, 85],[29, 90], [30, 95]];

			var plot = $.plot($("#graph-flot-points"),
				   [ { data: likes, label: "Fans"} ], {
					   series: {
						   lines: { 
							   show: true,
								lineWidth: 2,
								fill: true, 
								fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.3 } ] }
						 	},
						   points: { show: true, 
									 lineWidth: 2 
								 },
						   shadowSize: 0
					   },
					   grid: { hoverable: true, 
							   clickable: true, 
							   tickColor: "#f9f9f9",
							   borderWidth: 0
							 },
					   colors: ["#3fcfbb"],
						xaxis: {ticks:6, tickDecimals: 0},
						yaxis: {ticks:3, tickDecimals: 0},
					 });

			function showTooltip(x, y, contents) {
				$('<div id="tooltip">' + contents + '</div>').css( {
					position: 'absolute',
					display: 'none',
					top: y + 5,
					left: x + 5,
					border: '1px solid #fdd',
					padding: '2px',
					'background-color': '#dfeffc',
					opacity: 0.80
				}).appendTo("body").fadeIn(200);
			}

			var previousPoint = null;
			$("#graph-flot-points").bind("plothover", function (event, pos, item) {
				$("#x").text(pos.x.toFixed(2));
				$("#y").text(pos.y.toFixed(2));

					if (item) {
						if (previousPoint != item.dataIndex) {
							previousPoint = item.dataIndex;

							$("#tooltip").remove();
							var x = item.datapoint[0].toFixed(2),
								y = item.datapoint[1].toFixed(2);

							showTooltip(item.pageX, item.pageY,
										item.series.label + " of " + x + " = " + y);
						}
					}
					else {
						$("#tooltip").remove();
						previousPoint = null;
					}
			});
		}

		// graph real time
		if ($('#graph-flot-realtime').length) {
		
			var data = [],
				totalPoints = 300;

			function getRandomData() {

				if (data.length > 0)
					data = data.slice(1);

				// Do a random walk

				while (data.length < totalPoints) {

					var prev = data.length > 0 ? data[data.length - 1] : 50,
						y = prev + Math.random() * 10 - 5;

					if (y < 0) {
						y = 0;
					} else if (y > 100) {
						y = 100;
					}

					data.push(y);
				}

				// Zip the generated y values with the x values

				var res = [];
				for (var i = 0; i < data.length; ++i) {
					res.push([i, data[i]])
				}

				return res;
			}

			// Set up the control widget

			var updateInterval = 30;
			$("#updateInterval").val(updateInterval).change(function () {
				var v = $(this).val();
				if (v && !isNaN(+v)) {
					updateInterval = +v;
					if (updateInterval < 1) {
						updateInterval = 1;
					} else if (updateInterval > 2000) {
						updateInterval = 2000;
					}
					$(this).val("" + updateInterval);
				}
			});

			var plot = $.plot("#graph-flot-realtime", [ getRandomData() ], {
				series: {
					lines: { 
						show: true,
						lineWidth: 2,
						fill: true, 
						fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.3 } ] }
					},
					shadowSize: 0	// Drawing is faster without shadows
				},
				colors: ["#dd504c"],
				yaxis: {
					min: 0,
					max: 100
				},
				xaxis: {
					show: false
				}
			});

			function update() {

				plot.setData([getRandomData()]);

				// Since the axes don't change, we don't need to call plot.setupGrid()

				plot.draw();
				setTimeout(update, updateInterval);
			}

			update();
		}
	});
	
	function labelFormatter(label, series) {
		return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
	}
	</script>
</body>
</html>